import React from 'react'
import './Main.scss'
import NavHeader from 'component/NavHeader/NavHeader'
import { connect } from 'react-redux'
import { Route, withRouter, NavLink } from 'react-router-dom'

import Menu from '../Menu/Menu'
import Comment from '../Comment/Comment'
import Restanurant from '../Restanurant/Restanurant'

class Main extends React.Component {
  constructor(props) {
    super(props)
  }
  renderTabs() {
    let _tabs = this.props.tabs
    return _tabs.map((ele, index) => {
      return (
        <NavLink
          className="tabs_item"
          key={index}
          activeClassName="active"
          replace={true}
          to={'/' + ele.key}
        >
          {ele.name}
        </NavLink>
      )
    })
  }
  render() {
    return (
      <div className="detail">
        <NavHeader title="肯德基" />
        <div className="tab-bar">{this.renderTabs()}</div>
        <Route exact path="/menu" component={Menu} />
        <Route path="/comment" component={Comment} />
        <Route path="/restanurant" component={Restanurant} />
        {this.props.showChoose ? <div className="mask" /> : null}
      </div>
    )
  }
}

export default withRouter(
  connect(state => ({
    tabs: state.tabReducer.tabs,
    showChoose: state.menuReducer.showChoose
  }))(Main)
)
